<div class="panel panel-default">
  <div
    class="panel-heading clickable"
    data-toggle="collapse"
    data-target="#J_URL_Parameters"
  >
    <h4 class="panel-title">{{Kooboo.text.component.pageEditor.parameters}}</h4>
  </div>
  <div id="J_URL_Parameters" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="form-group">
        <div class="input-groups">
          <div v-for="(item,index) in defaultRouteValues" class="input-group">
            <input
              type="text"
              class="form-control key"
              style="width:130px"
              :placeholder="Kooboo.text.common.key"
              v-model="item.name"
            />
            <span class="input-group-addon">-</span>
            <input
              type="text"
              class="form-control value"
              style="width:120px"
              :placeholder="Kooboo.text.common.value"
              v-model="item.value"
            />
            <span class="input-group-btn"
              ><a
                class="btn btn-default"
                href="javascript:;"
                @click="removeDefaultRouteValue(item)"
                ><i class="fa fa-minus"></i></a
            ></span>
          </div>
        </div>
        <button
          type="button"
          class="btn btn-xs blue pull-right"
          @click="addDefaultRouteValue"
          ><i class="fa fa-plus"></i
        ></button>
      </div>
    </div>
  </div>
</div>
